@import "./variables.scss";

.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

// ----- ----- search ----- -----

.search-bar {
	width: $search-bar-width;
	height: $search-bar-height;
	background-color: white;
	border-radius: $search-bar-border-radius;
	margin: $search-bar-margin-tb 0;
	display: flex;
	align-items: center;
	position: relative;
}

.search-input {
	font-size: $search-input-font-size;
	position: absolute;
	left: $search-input-left;
}

.search-btn {
	font-size: $search-btn-font-size;
	position: absolute;
	right: $search-btn-right;
}

.search-btn::before {
    content: "";
    position: absolute;
    top: 50% + 3%; // 固定值+修订
    left: $search-btn-split-line-left;
    width: 1rpx; // 一般不会变
	height: $search-btn-split-line-height;
    background-color: $search-btn-split-line-bk-color;
	transform: translateY(-50%);
}

// ----- ----- body ----- -----

.body {
	width: $body-width;
	flex-grow: 1; // 撑满剩余的区域
	background-color: white;
	border-radius: $body-border-radius;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tag-title {
	width: $tag-title-width; // padding
	height: fit-content;
	padding-top: $tag-title-padding-top;
	font-size: $tag-title-font-size;
	background-color: transparent;
}

.tag-container {
	width: $tag-container-padding; // padding
	font-size: $tag-container-font-size;
	padding-top: $tag-container-padding-top;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.tag {
	width: fit-content;
	height: $tag-height;
	line-height: $tag-height;
	padding: $tag-padding;
	border-radius: $tag-border-radius;
	color: $tag-font-color;
	background-color: $tag-bk-color;
	margin: $tag-margin;
}

.search-icon {
	$size: 30rpx;
	width: $size;
	height: $size;
	margin-right: 25rpx;
}

.search-result-item {
	width: 700rpx;
	margin: 40rpx 0;
	display: flex;
	align-items: center;
	font-size: 30rpx;
}